<template>
  <div id="app">
    <!-- header -->
    <header>智慧商城</header>

    <!-- search -->
    <div class="search">
      <a href="javascript:;" class="searchCont">
        <i class="iconfont icon-sousuo"></i>
        <p>搜索商品</p>
      </a>
    </div>
    <AppBanner :lunbo="lunbo"></AppBanner>
    <AppAd></AppAd>
    <!-- ============================= 新品首发 Start =================================== -->
    <div class="main">
      <AppSection1 :list="list"></AppSection1>
      <!-- ============================= 新品首发 End =================================== -->
      <AppSection2 :pic="pic"></AppSection2>
      <!-- ============================= 商品组 Start =================================== -->
      <AppSection3 :commoditys="commoditys"></AppSection3>
    </div>

    <!-- footer -->
    <AppFooter></AppFooter>
  </div>
</template>

<script>
import '@/assets/css/index.css'
import '@/assets/css/swiper.css'
import axios from 'axios'
import AppAd from '@/components/AppAd.vue'
import AppBanner from '@/components/AppBanner.vue'
import AppFooter from '@/components/AppFooter.vue'
import AppSection1 from '@/components/AppSection1.vue'
import AppSection2 from '@/components/AppSection2.vue'
import AppSection3 from '@/components/AppSection3.vue'

export default {
  components: {
    AppAd,
    AppBanner,
    AppFooter,
    AppSection1,
    AppSection2,
    AppSection3
  },
  data() {
    return {
      // section1的数据
      list: [],
      pic: [],
      commoditys: [],
      lunbo: []
    }
  },
  async created() {
    let arr = await axios({
      url: 'http://cba.itlike.com/public/index.php?s=/api/page/detail'
    })
    console.log(arr)
    this.list = arr.data.data.pageData.items[3].data
    // console.log(this.list)
    this.pic = arr.data.data.pageData.items[4].data[0]
    // console.log(this.pic)
    this.commoditys = arr.data.data.pageData.items[6].data
    // console.log(this.commoditys)
    this.lunbo = arr.data.data.pageData.items[1].data
    console.log(this.lunbo)
  }
}
</script>

<style></style>
